<template>
  <div class="w-full flex flex-col justify-center items-center">
    <div class="flex flex-wrap  justify-center mt-12">
      <div class="flex" v-for="(item,index) in experimentalCategory">
        <div :class="{'pickTab':pickTab===item.id}" @click="pickTab=item.id"
             class="font-bold border-b-4 mb-4 border-b-white text-[16px] sm:text-[18px] lg:text-[18px] 2xl:text-[20px] duration-100 pt-1 cursor-pointer
          hover:text-blue-600 hover:border-b-4 hover:border-b-blue-600">{{ item.title }}
        </div>
        <span class="ml-12 mr-12 text-gray-500 pt-1" v-if="index!==experimentalCategory.length-1">|</span>
      </div>
    </div>
    <div class="mt-9 ml-20 mr-20 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 2xl:grid-cols-4  gap-x-8 gap-y-12">
      <div class="overflow-hidden group/item relative pb-4 cursor-pointer duration-300 shadow-xl hover:-translate-y-1.5"
           v-for="item in renderingProduct"
           @click="openUrl(item.jupyterLink)"
           :key="item.id">
        <div class="w-full relative">
          <img class="w-full" :src="item.imgUrl"/>
          <div class="absolute top-14 w-full flex items-center flex-col">
            <h3 class="text-[18px] sm:text-[20px] lg:text-[24px] 2xl:text-[27px] text-center pl-7 pr-7 text-white w-auto pb-2">
              {{ item.title }}</h3>
            <h4 class="text-[16px] w-38 sm:text-[18px] lg:text-[20px] 2xl:text-[22px]  pt-2 text-white text-center border-t-2">
              {{ getTypeText(item.type) }}</h4>
          </div>
        </div>
        <h3 class="mt-4 ml-6 text-[18px]">{{ item.title }}</h3>
        <span class="ml-6 mt-6  text-[18px] text-gray-700">实验简介：</span>
        <div class="absolute top-0 left-0 w-full h-full
        hidden group-hover/item:block
        text-center text-white group-hover/item:bg-gradient-to-r from-[#249CF4] to-[#0067DE] px-6 py-6

">
          <h3 class="text-[18px] pt-16 sm:text-[20px] lg:text-[24px] lg:pt-0  2xl:text-[22px] mb-5 mt-2">{{
              item.title
            }}</h3>
          <p :title="item.target"
             class="text-[14px] pt-16 sm:text-[16px] sm:pt-0 lg:text-[18px]  text-left  text-ellipsis overflow-hidden line-clamp-4 h-26">
            {{ item.target }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const experimentalCategory = reactive([
  {
    id: '0',
    title: '全部'
  },
  {
    id: '1',
    title: '金融财经'
  },
  {
    id: '2',
    title: '商务智能'
  },
  {
    id: '3',
    title: '文化旅游'
  },
  {
    id: '4',
    title: '智慧农业'
  },
  {
    id: '5',
    title: '智能制造'
  },
  {
    id: '6',
    title: '其他'
  },
])
const pickTab = ref('0')
const productLists = reactive<any>({
  1: [
    {
      "id": 11215,
      "title": "股票走势对比分析",
      "target": "股票走势对比分析",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/12%20股票走势对比分析/股票走势对比分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 1,
      imgUrl: new URL('../../../assets/img/1.jpg', import.meta.url).href
    },
    {
      "id": 165,
      "title": "成渝十四五数字经济规划",
      "target": "“十四五”数字经济发展规划",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/08%20成渝十四五数字经济规划/成渝数字经济政策规划文本分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 1,
      imgUrl: new URL('../../../assets/img/1.jpg', import.meta.url).href
    },
    {
      "id": 11214,
      "title": "基于XGboost的股票预测",
      "target": "股票预测是高度非线的，这就要求预测模型要能够处理非线性问题，并且，股票具有时间序列的特性，所以本文选取了ARMA模型对其进行预测",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/11%20基于XGboost的股票预测/基于XGboost的股票预测.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 1,
      imgUrl: new URL('../../../assets/img/1.jpg', import.meta.url).href
    },
    {
      "id": 161,
      "title": "中国各省旅游收入分析",
      "target": "全国各省市旅游收入排行分析",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/06%20中国各省旅游收入分析/中国各省旅游收入分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 1,
      imgUrl: new URL('../../../assets/img/1.jpg', import.meta.url).href
    },

  ],
  2: [
    {
      "id": 152,
      "title": "春节档电影票房分析",
      "target": "基于春节档电影票房数据进行一系列分析。",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/02%20春节档电影票房分析/电影票房分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 2,
      imgUrl: new URL('../../../assets/img/2.jpg', import.meta.url).href
    }
  ],
  3: [
    {
      "id": 154,
      "title": "四川省五一出行旅游分析",
      "target": "基于四川省五一出行旅游数据进行一系列分析。",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/tree/scratch/02数据科学实训/07%20案例实现/03%20四川省五一出行旅游分析",
      "menuId": 18,
      "disabled": 0,
      type: 3,
      imgUrl: new URL('../../../assets/img/3.jpg', import.meta.url).href
    },
    {
      "id": 163,
      "title": "金砖国家旅游分析",
      "target": "我国入境旅游客源分析",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/07%20金砖国家旅游分析/金砖国家旅游分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 3,
      imgUrl: new URL('../../../assets/img/3.jpg', import.meta.url).href
    },
    {
      "id": 167,
      "title": "成渝旅游景点分布分析划",
      "target": "旅游资源是提供旅游休憩服务的物质载体，是旅游业发展的重要依托。",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/09%20成渝旅游景点分布分析/成渝旅游景点分布分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 3,
      imgUrl: new URL('../../../assets/img/3.jpg', import.meta.url).href
    }
  ],
  4: [
    {
      "id": 156,
      "title": "成渝空气质量分析",
      "target": "基于成渝空气质量数据进行一系列分析。",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/tree/scratch/02数据科学实训/07%20案例实现/04%20成渝空气质量分析",
      "menuId": 18,
      "disabled": 0,
      type: 4,
      imgUrl: new URL('../../../assets/img/4.jpg', import.meta.url).href
    }
  ],
  5: [
    {
      "id": 11213,
      "title": "能源数据分析",
      "target": "能源数据分析",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/notebooks/scratch/02数据科学实训/07%20案例实现/10%20能源数据分析/能源数据分析.ipynb",
      "menuId": 18,
      "disabled": 0,
      type: 5,
      imgUrl: new URL('../../../assets/img/5.jpg', import.meta.url).href
    }
  ],
  6: [
    {
      "id": 159,
      "title": "全球疫情数据分析",
      "target": "基于全球疫情数据进行一系列分析。",
      "imageUrl": "https://msds-html.obs.cn-southwest-2.myhuaweicloud.com/cloud_lab/2023021708.jpg",
      "jupyterLink": "https://ds.mssdk.vip/user-redirect/tree/scratch/02数据科学实训/07%20案例实现/05%20全球疫情数据分析",
      "menuId": 18,
      "disabled": 0,
      type: 6,
      imgUrl: new URL('../../../assets/img/6.jpg', import.meta.url).href
    }
  ]
})
const openUrl = (url: string) => {
  window.open(url)
}
//获取指定的中文类别
const getTypeText = (type: number) => {
  switch (type) {
    case 1:
      return '金融财经'
    case 2:
      return '商务智能'
    case 3:
      return '文化旅游'
    case 4:
      return '智慧农业'
    case 5:
      return '智能制造'
    case 6:
      return '其它'
  }
}

const renderingProduct = computed(() => {
  let pr: any = []
  if (+pickTab.value === 0) {
    Object.values(productLists).forEach((item: any) => {
      pr = [...pr, ...item]
    })
  } else {
    pr = [...productLists[pickTab.value]]
  }
  return pr
})
</script>

<style scoped>
.pickTab {
  color: #3967FF;
  border-bottom: 4px solid #3967FF;
}
</style>
